<template>
  <div>
    <!-- <van-button @click="showPopup"><van-icon name="arrow-down"/>点击</van-button> -->
    <van-popup
      v-model="popupVisible"
      round
      :close-on-click-overlay="false"
      position="bottom">
      <div class="popup-wrap">
        <div class="tool-wrap">
          <span @click="choosed(false)">取消</span>
          <span class="active" @click="choosed(true)">确定</span>
        </div>
        <div class="popup-body" :style="{ height: height }">
          <slot name="header"></slot>

          <div class="time-clock-wrap">
            <span @click="changeActive('start')" :class="{'active': activeTime == 'start'}">{{ startTime }}</span>-
            <span @click="changeActive('end')" :class="{'active': activeTime == 'end'}">{{ endTime }}</span>
          </div>
          <van-datetime-picker
            :show-toolbar="false"
            v-show="activeTime == 'start'"
            v-model="startTime"
            @change="timeChanged"
            type="time"
            disabled
          />
          <van-datetime-picker
            :show-toolbar="false"
            v-show="activeTime == 'end'"
            @change="timeChanged"
            v-model="endTime"
            type="time"
            disabled
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

export default {
  props: {
    start: {
      type: String,
      require: true
    },
    end: {
      type: String,
      require: true
    },
    show: {
      type: Boolean,
      require: true
    },
    height: {
      type: String,
      require: true
    }
  },
  watch: {
    show(newV, oldV) {
      this.popupVisible = newV
    }
  },
  created() {
    this.startTime = this.start || `${new Date().getHours()}:${new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes()}`
    this.endTime = this.end || `${new Date().getHours()+1}:${new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes()}`
  },
  data () {
    return {
      popupVisible: this.show,
      activeTime: 'start', //激活的时间选择
      startTime: '',
      endTime: ''
    }
  },
  methods: {
    showPopup() {
      this.popupVisible = true;
    },
    /**
     * 用户点击操作按钮 , 进行数据操作
     * @param  {[type]} boolean [description]
     * @return {[type]}         [description]
     */
    choosed(boolean) {
      if(boolean) {
        this.$emit('change', {start: this.startTime, end: this.endTime})
      } else {
        this.startTime = this.start || `${new Date().getHours()}:${new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes()}`
        this.endTime = this.end || `${new Date().getHours()+1}:${new Date().getMinutes() < 10 ? '0'+new Date().getMinutes() : new Date().getMinutes()}`
      }
      this.popupVisible = false

      this.$emit('update:show', false)
    },
    /**
     * 点击不同的时间field
     * @param  {[type]} type [description]
     * @return {[type]}      [description]
     */
    changeActive(type) {
      this.activeTime = type
    },
    /**
     * 时间变化 根据当前操作的是开始或是结束时间 进行关联时间修改 确保最终选择的时间无误
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    timeChanged(e) {
      if(this.startTime > this.endTime) { // 开始时间超过结束时间
        if(this.activeTime == 'start') {//操作的是开始时间, 变更结束时间
          this.endTime = parseInt(this.startTime) > 9 ? `${parseInt(this.startTime)}:${this.startTime.split(':')[1]}` : `0${parseInt(this.startTime)}:${this.startTime.split(':')[1]}`
        } else {
          this.startTime = parseInt(this.endTime) > 9 ? `${parseInt(this.endTime)}:${this.endTime.split(':')[1]}` : `0${parseInt(this.endTime)}:${this.endTime.split(':')[1]}`
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  
  .time-clock-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15vw;
    span {
      display: inline-block;
      padding: 8px 21px;
      font: 17px;
      border: 1px solid #eee;
      
    }
  }
  
</style>
